<template>
    <div class="createPost-container">
        <el-form ref="bannerForm" :rules="rules" :model="bannerForm" class="form-container">
            <div class="createPost-main-container">
                <el-row>
                    <el-col :span="21">
                        <el-form-item style="margin-bottom: 40px;" prop="name">
                            <MDinput name="name" v-model="bannerForm.name" >
                                名称
                            </MDinput>
                            <span  class='input-helper'>名称没有实际用处，方便于后台管理查询</span>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item style="margin-bottom: 40px;" prop="position" label="位置:">
                            <el-select class="select-normal" v-model="bannerForm.position" clearable placeholder="请选择" size="large">
                                <el-option
                                        v-for="item in positionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="image_file_id" style="margin-bottom: 40px;" label="图片:">
                            <upload-image :file-list="uploadFiles" @upload-success="uploadSuccess" @remove-file="removeFile"></upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item style="margin-bottom: 40px;" prop="link">
                            <MDinput name="link" v-model="bannerForm.link" >
                                跳转链接
                            </MDinput>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('bannerForm', 0)" :loading="subSaveLoading">保存</el-button>
                            <el-button type="success" @click="submitForm('bannerForm', 1)" :loading="subPushLoading">立即发布</el-button>
                            <el-button @click="$router.back()">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script>
    import bannerApi from '../../../api/banner'
    import MDinput from '@/components/MDinput'
    import UploadImage from '@/components/UploadImage'
    import { parseFilePath } from '../../../utils/common'
    export default {
      components: {
        MDinput,
        UploadImage
      },
      data () {
        return {
          bannerForm: {
            name: '',
            position: 0,
            image_file_id: '',
            link: '',
            status: 0
          },
          positionOptions: [
            {
              value: 0,
              label: '首页'
            },
            {
              value: 1,
              label: '解决方案'
            },
            {
              value: 2,
              label: '关于平台'
            },
            {
              value: 3,
              label: '新闻动态'
            }
          ],
          rules: {
            name: [
              {required: true, message: '请输入名称', trigger: 'blur'}
            ],
            position: [
              {required: true, type: 'number', message: '请选择位置', trigger: 'blur'}
            ],
            image_file_id: [
              {required: true, message: '请上传图片', trigger: 'blur'}
            ],
            link: [
              {required: true, type: 'url', message: '请输入跳转链接', trigger: 'blur'}
            ]
          },
          subSaveLoading: false,
          subPushLoading: false,
          uploadFiles: []
        }
      },
      created () {
        const self = this
        if (this.$route.params.id) {
          bannerApi.getBannerById(this.$route.params.id).then(response => {
            const result = response.data.data
            self.bannerForm = {
              name: result.name,
              position: result.position,
              image_file_id: result.image.data ? result.image.data.id : '',
              link: result.link,
              status: result.status
            }
            if (result.image.data) {
              self.uploadFiles.push({name: parseFilePath(result.image.data.path).base, url: result.image.data.fullPath, response: result.image})
            }
          }, () => {
            self.$router.replace({name: 'Error404'})
          })
        }
      },
      methods: {
        submitForm (formName, status) {
          const self = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              self.bannerForm.status = status
              self.postBanner()
            } else {
              return false
            }
          })
        },
        hideLoading () {
          if (this.subSaveLoading) {
            this.subSaveLoading = false
          }
          if (this.subPushLoading) {
            this.subPushLoading = false
          }
        },
        uploadSuccess (data) {
          this.bannerForm.image_file_id = data.data.id
        },
        removeFile (data) {
          if (this.bannerForm.image_file_id === data.data.id) {
            this.bannerForm.image_file_id = ''
          }
        },
        postBanner () {
          const id = this.$route.params.id
          const self = this
          if (self.bannerForm.status === 0) {
            self.subSaveLoading = true
          } else {
            self.subPushLoading = true
          }
          if (id) {
            bannerApi.updateBanner(id, self.bannerForm).then(() => {
              self.hideLoading()
              self.$message.success('操作成功')
              self.$router.back()
            }, response => {
              self.hideLoading()
              self.$message.error(response.data.message)
            })
          } else {
            bannerApi.addBanner(self.bannerForm).then(() => {
              self.hideLoading()
              self.$message.success('操作成功')
              self.$router.back()
            }, response => {
              self.hideLoading()
              self.$message.error(response.data.message)
            })
          }
        }
      }
    }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    @import "../../../assets/css/form.scss";
</style>
